<!doctype html>
<html>
<head>
<meta charset="utf-8">

<!--bootstrap和jQuery的调用，用于UI设计和网页交互的基础库-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="no-referrer">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome.min.css">
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/bootstrap.bundle.min.js"></script> 
<script src="js/vue.global.js"></script>
<script src="js/es5/tex-mml-chtml.js"></script>
<script src="js/globalVariable.js"></script>
<script src="js/marked.min.js"></script>

<!--网站标题图标，自定义的css和js的调用-->
<title>Carbon-GPT</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>

<body>
<div id="version" style="display: none">Version = 1.0.0</div>
<div id="starmsg"> 
    <!--用户登陆弹窗-->
    <div class="popchart" v-cloak v-if="boardSelect==1">
        <div class="container">
            <div class="card popcard" style="width: 300px">
                <div class="card-header">登陆系统</div>
                <div class="card-body">
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-user"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" name="user" placeholder="请输入用户名" v-model="login.id">
                    </div>
                    <div>
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-key"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" name="psw" type="password" placeholder="请输入密码" v-model="login.psw">
                    </div>
                </div>
                <div class="card-footer text-end">
                    <div class="btn btn-primary" @click="boardSelect=0;userlogin();">确定</div>
                    <div class="btn btn-danger" @click="boardSelect=0;">取消</div>
                </div>
            </div>
        </div>
    </div>
    <!--用户注册弹窗-->
    <div class="popchart" v-cloak v-if="boardSelect==2">
        <div class="container">
            <div class="card popcard" style="width: 380px">
                <div class="card-header">注册新用户</div>
                <div class="card-body">
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-user"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" name="user" placeholder="请输入用户名" v-model="reg.id">
                    </div>
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-key"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" type="password" name="psw" placeholder="请输入密码" v-model="reg.password">
                    </div>
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-key"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" type="password" name="confirm" placeholder="确认密码" v-model="reg.confirm">
                    </div>
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-ghost"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" name="nick" placeholder="请输入昵称" v-model="reg.nickname">
                    </div>
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-sm" :class="{'btn-dark': reg.gender == 'male','btn-outline-dark': reg.gender != 'male'}" style="width: 35px" @click="reg.gender='male'"><i class="fa-solid fa-mars"></i></div>
                        <div class="btn btn-sm" :class="{'btn-dark': reg.gender == 'female','btn-outline-dark': reg.gender != 'female'}" style="width: 35px" @click="reg.gender='female'"><i class="fa-solid fa-venus"></i></div>
                        <div class="btn btn-sm" :class="{'btn-dark': reg.gender == 'trans','btn-outline-dark': reg.gender != 'trans'}" style="width: 35px" @click="reg.gender='trans'"><i class="fa-solid fa-mars-and-venus"></i></div>
                    </div>
                    <div style="margin-bottom: 4px;">
                        <div class="row">
                            <div class="col-5 verMid"> <img
                                     style="width: 100%;margin-top: 10px"
                                     alt="avatar" 
                                     :src="'data/avatar/' + reg.avatar + '.jpg'"> </div>
                            <div class="col"> <span v-for="i,img in imgs"> <img
                                     class="circle" 
                                     :class="{'bn': reg.avatar != img,'bs': reg.avatar == img}" 
                                     style="width: 32px;height: 32px"
                                     alt="avatar" 
                                     :src="'data/avatar/' + img + '.jpg'" @click="reg.avatar=img"> </span> </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <div class="btn btn-primary" @click="boardSelect=0;userRegister();">确定</div>
                    <div class="btn btn-danger" @click="boardSelect=0;">取消</div>
                </div>
            </div>
        </div>
    </div>
    <!--修改个人信息弹窗-->
    <div class="popchart" v-cloak v-if="boardSelect==4">
        <div class="container">
            <div class="card popcard" style="width: 380px">
                <div class="card-header">修改个人信息</div>
                <div class="card-body">
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-user"></i></div>
                        {{tempInfo.id}} </div>
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-ghost"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" name="nick" placeholder="请输入昵称" v-model="tempInfo.nickname">
                    </div>
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-sm" :class="{'btn-dark': tempInfo.gender == 'male','btn-outline-dark': tempInfo.gender != 'male'}" style="width: 35px" @click="tempInfo.gender='male'"><i class="fa-solid fa-mars"></i></div>
                        <div class="btn btn-sm" :class="{'btn-dark': tempInfo.gender == 'female','btn-outline-dark': tempInfo.gender != 'female'}" style="width: 35px" @click="tempInfo.gender='female'"><i class="fa-solid fa-venus"></i></div>
                        <div class="btn btn-sm" :class="{'btn-dark': tempInfo.gender == 'trans','btn-outline-dark': tempInfo.gender != 'trans'}" style="width: 35px" @click="tempInfo.gender='trans'"><i class="fa-solid fa-mars-and-venus"></i></div>
                    </div>
                    <div style="margin-bottom: 4px;">
                        <div class="row">
                            <div class="col-5 verMid"> <img
                                     style="width: 100%;margin-top: 10px"
                                     alt="avatar" 
                                     :src="'data/avatar/' + tempInfo.avatar + '.jpg'"> </div>
                            <div class="col"> <span v-for="i,img in imgs"> <img
                                     class="circle" 
                                     :class="{'bn': tempInfo.avatar != img,'bs': tempInfo.avatar == img}" 
                                     style="width: 32px;height: 32px"
                                     alt="avatar" 
                                     :src="'data/avatar/' + img + '.jpg'" @click="tempInfo.avatar=img"> </span> </div>
                        </div>
                    </div>
                    <hr>
                    <div class="btn btn-primary" @click="boardSelect=3;userUpdate();">修改信息</div>
                    <hr>
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-key"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" type="password" name="psw" placeholder="请输入新密码" v-model="password">
                    </div>
                    <div style="margin-bottom: 4px">
                        <div class="btn btn-outline-dark btn-sm" style="width: 35px"><i class="fa-solid fa-key"></i></div>
                        <input class="btn btn-outline-dark btn-sm s-input" type="password" name="confirm" placeholder="再次确认密码" v-model="confirm">
                    </div>
                    <hr>
                    <div class="btn btn-primary" @click="boardSelect=3;changePassword();">修改密码</div>
                </div>
                <div class="card-footer text-end">
                    <div class="btn btn-danger" @click="boardSelect=3;">取消</div>
                </div>
            </div>
        </div>
    </div>
    <!--************************主界面banner*********************-->
    <div class="text-center banner verMid">
        <div class="container">
            <div style="float:left"> &nbsp;
                
                <h3 style="display: inline-table"> Carbon-GPT</h3>
            </div>
            <div style="float:right" v-if="boardSelect < 3">
                <h3 style="display: inline-table" @click="boardSelect = 1">登陆</h3>
                &nbsp;
                <h3 style="display: inline-table" @click="boardSelect = 2">注册</h3>
                &nbsp; </div>
            <h3  style="display: inline-table">&nbsp;</h3>
            <div style="float:right" v-if="boardSelect > 2">
                <h3 style="display: inline-table"><img alt="Avatar" :src="'data/avatar/'+ userInfo.avatar +'.jpg'" class="circle" @click="boardSelect = 4;tempInfo = {...userInfo}"></h3>
                <h3 style="display: inline-table">{{userInfo.nickname}} <i class="fa-solid fa-arrow-right-from-bracket" @click="logout()"></i> </h3>
                &nbsp; </div>
        </div>
    </div>
    <!--************************PC界面*********************-->
    
    <div class="d-none d-md-block container" >
        
        <div class="row" style="width: 100%">
            <div class="col-md-3 col-lg-2">
                <div id="message1" class="messageScreen" v-html="textScnContent"></div>
                <div style="font-size: 20px;padding-left: 5px" 
					 :class="{'usrSelect':usrSelect=='__common__','usrOnline':usrSelect!='__common__'}"
					 @click="getMessage()"
					 > 获取历史记录
                    </div>
                <hr>
                <div v-for="usr in allUsers" style="font-size: 20px;margin-bottom: 3px;padding-left: 5px" 
					 :class="{'usrOnline': usrstat(usr.id)==1,'usrOffline':usrstat(usr.id)==2,'usrSelect':usrstat(usr.id)==0}"
					 v-show="usr.id!=userInfo.id"> <img alt="Avatar" :src="'data/avatar/'+ usr.avatar +'.jpg'" class="circle"> {{usr.nickname}} <span style="color:#B10002" v-show="usrAlert.indexOf(usr.id)!=-1"><i class="fa-solid fa-comment-dots"></i></span> </div>
            </div>
            <div class="col-md-9 col-lg-10">
                <div id="chartWindow" class="messageScreen">
                    <div v-for="msg in msgScreen" style="font-size:20px;padding-bottom: 10px">
                        <div v-show="msg.usr.id==userInfo.id" style="display: flex;justify-content: flex-end">

                            <span class="text-end">
                                <div class="title">{{msg.usr.nickname}}</div>
                                <div  class="chartSelf">
                                    <span class="msgtext" v-html="renderMarkdown(msg.msg)"></span> 
                                    <template v-if="msg.ref!='ERROR'">
                                        <hr>
                                        <ref-contents v-for="refer in msg.ref" :doc="refer"></ref-contents>
                                    </template>                                 
                                </div>
                                <div class="time">{{msg.cts}}</div>
                            </span>

                            <img alt="Avatar" :src="'data/avatar/'+ msg.usr.avatar +'.jpg'" class="circle" style="height: 2em;display: inline-table;"> 

                        </div>
                        <div v-show="msg.usr.id!=userInfo.id" style="display: flex;justify-content: flex-start"> 
                            <img alt="Avatar" :src="'data/avatar/'+ msg.usr.avatar +'.jpg'" class="circle" style="height: 2em;">
                            <span class="text-start">
                                <div class="title">{{msg.usr.nickname}}</div>
                                <div  class="chartOther">
                                    <span class="msgtext" v-html="renderMarkdown(msg.msg)"></span> 
                                    <template v-if="msg.ref!='ERROR'">
                                        <hr style="margin: 0.1em 0">
                                        <ref-contents v-for="refer in msg.ref" :doc="refer"></ref-contents>
                                    </template>                                 
                                </div>
                                <div class="time">{{msg.cts}}</div>
                            </span> 
                        </div>
                    </div>
                    <div v-show="waiting" class="text-center"><span class="spinner-border spinner-border-sm"></span>我在思考，请稍候...</div>
                </div>
                <div class="text-"></div>
                <input class="btn btn-outline-dark s-input text-start" v-model="inputMsg" style="float: left; width: calc(100% - 80px);" id="textBox" />
                <div class="btn btn-primary" style="float: right;" @Click="sendMessage()">发送</div>
            </div>
        </div>
    </div>
    <!--***********************移动界面********************-->
    <div class="d-block d-md-none">
        <div id="message2" class="messageScreen" v-html="textScnContent"></div>
        <div id="chartWindowM" class="messageScreen">
                        <div v-for="msg in msgScreen" style="font-size:15px;padding-bottom: 4px">
                            <div v-show="msg.usr.id==userInfo.id" style="display: flex;justify-content: flex-end">
                                <span class="text-end">
									<div class="title">{{msg.usr.nickname}}</div>
                                    <div  class="chartSelf">
   									    <span class="msgtext" v-html="renderMarkdown(msg.msg)"></span> 
                                        <template v-if="msg.ref!='ERROR'">
                                            <hr>
                                            <ref-contents v-for="refer in msg.ref" :doc="refer"></ref-contents>
                                        </template>                                 
                                    </div>
                                    <div class="time">{{msg.cts}}</div>
								</span>
                                
								<img alt="Avatar" :src="'data/avatar/'+ msg.usr.avatar +'.jpg'" class="circle" style="height: 2em;display: inline-table;"> 
                                
							</div>
                            <div v-show="msg.usr.id!=userInfo.id" style="display: flex;justify-content: flex-start"> 
								<img alt="Avatar" :src="'data/avatar/'+ msg.usr.avatar +'.jpg'" class="circle" style="height: 2em;">
								<span class="text-start">
									<div class="title">{{msg.usr.nickname}}</div>
                                    <div  class="chartOther">
   									    <span class="msgtext" v-html="renderMarkdown(msg.msg)"></span> 
                                        <template v-if="msg.ref!='ERROR'">
                                            <hr>
                                            <ref-contents v-for="refer in msg.ref" :doc="refer"></ref-contents>
                                        </template>                                 
                                    </div>
                                    <div class="time">{{msg.cts}}</div>
								</span> 
							</div>
                        </div>
                    <div v-show="waiting" class="text-center"><span class="spinner-border spinner-border-sm"></span>我在思考，请稍候...</div>
        </div>
        <input class="btn btn-outline-dark s-input text-start" v-model="inputMsg" style="float: left; width: calc(100% - 80px);" id="textBoxM"/>
        <div class="btn btn-primary" style="float: right;" @Click="sendMessage()">发送</div>
        <br>
        <br>
        <div class="row container-fluid">
            <div style="font-size: 20px;padding-left: 5px;margin: 3px;" 
				class="col-auto" 
				:class="{'usrSelect':usrSelect=='__common__','usrOnline':usrSelect!='__common__'}"
				@click="getMessage()"> <i class="fa-solid fa-people-arrows"></i> 获取历史记录 <span style="color:#B10002" v-show="usrAlert.indexOf('__common__')!=-1"><i class="fa-solid fa-comment-dots"></i></span> </div>
            <div v-for="usr in allUsers" style="font-size: 20px;margin: 3px;padding-left: 5px" 
				class="col-auto" 
				:class="{'usrOnline': usrstat(usr.id)==1,'usrOffline':usrstat(usr.id)==2,'usrSelect':usrstat(usr.id)==0}"
				@click="viewUser(usr.id)"
				v-show="usr.id!=userInfo.id"> <img alt="Avatar" :src="'data/avatar/'+ usr.avatar +'.jpg'" class="circle"> {{usr.nickname}} <span style="color:#B10002" v-show="usrAlert.indexOf(usr.id)!=-1"><i class="fa-solid fa-comment-dots"></i></span> </div>
        </div>
    </div>
    <hr>
    <div class="text-center ref"><strong>Copyright</strong> © Atelier of Stardust|Spectre Lee|2024. </div>
</div>
</body>
</html>